<template>
  <el-breadcrumb>
    <el-breadcrumb-item>公众监督数据管理</el-breadcrumb-item>
    <el-breadcrumb-item>公众监督数据列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-form
    :inline="true"
    :model="queryForm"
    size="small"
    style="margin-top: 20px"
    class="demo-form-inline"
  >
    <el-form-item label="省区域">
      <el-select
        v-model="queryForm.provinceId"
        @change="changeProvince"
        style="width: 100px"
      >
        <el-option
          :label="province.provinceName"
          :value="province.provinceId"
          v-for="province in provinceArr"
          :key="province.provinceId"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="市区域">
      <el-select v-model="queryForm.cityId" style="width: 100px">
        <el-option
          :label="city.cityName"
          :value="city.cityId"
          v-for="city in cityArr"
          :key="city.cityId"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="预估等级">
      <el-select v-model="queryForm.estimatedGrade" style="width: 80px">
        <el-option
          :label="aqi.chineseExplain"
          :value="aqi.aqiId"
          v-for="aqi in aqiArr"
          :key="aqi.aqiId"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="反馈日期">
      <el-date-picker
        v-model="queryForm.afDate"
        type="date"
        style="width: 100px"
        placeholder="反馈日期"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="danger" @click="clear">清空</el-button>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form-item>
    <el-form-item label="">
      <el-radio-group v-model="queryForm.state">
        <el-radio label="0">未指派</el-radio>
        <el-radio label="1">已指派</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
  <el-table
    :data="pageResponseDto.list"
    style="width: 100%"
    :cell-style="{ padding: '4px' }"
    empty-text="无数据"
  >
    <el-table-column prop="afId" label="编号" width="90" />
    <el-table-column prop="supervisor.realName" label="反馈者姓名" />
    <el-table-column prop="gridProvince.provinceName" label="所在省" />
    <el-table-column prop="gridCity.cityName" label="所在市" />
    <el-table-column prop="estimatedGrade" label="预估污染等级">
      <template #default="scope">
        <p
          :style="{
            color: scope.row.aqi.color,
            fontSize: '14px',
            fontWeight: '700',
            textAlign: 'center',
          }"
        >
          {{ scope.row.aqi.aqiExplain }} ({{ scope.row.aqi.chineseExplain }})
        </p>
      </template>
    </el-table-column>
    <el-table-column prop="afDate" label="反馈日期" />
    <el-table-column prop="afTime" label="反馈时间" />
    <el-table-column label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="detailsEvent(scope.row.afId)">
          <el-icon title="查看详情" style="font-size: 18px"
            ><Tickets
          /></el-icon>
        </el-button>
        <el-button link type="danger" size="small" @click="assignEvent(scope.row)" v-if="queryForm.state==0">
          <el-icon title="指派网格员" style="font-size: 18px"
            ><Pointer
          /></el-icon>
        </el-button>
        <el-button link type="danger" size="small" @click="assignEvent(scope.row)" v-if="queryForm.state==1">
          <el-icon title="重新指派" style="font-size: 18px"
            ><Edit
          /></el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination
      background
      small
      layout="prev, pager, next, total"
      :total="pageResponseDto.totalRow"
      :page-size="pageResponseDto.maxPageNum"
      style="margin-top: 20px"
      v-model:current-page="pageNum"
    />
  </div>
</template>

<script setup>
import { Tickets, Pointer, Edit } from "@element-plus/icons-vue";
import { reactive, ref, inject, watch } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const store = useStore();
const router = useRouter();
const axios = inject("axios");

const queryForm = reactive({
  provinceId: 0,
  cityId: 0,
  estimatedGrade: 0,
  afDate: "",
  state: "0",
});

//在分页组件上使用双向绑定pageNum数据，然后监听pageNum
const pageNum = ref(1);
watch(pageNum, (newValue, oldValue) => {
  listAqiFeedbackPage(newValue);
});

const provinceArr = ref([]);
const cityArr = ref([]);
const aqiArr = ref([]);
const pageResponseDto = ref({});

//初始化(查询反馈列表)
const listAqiFeedbackPage = (pageNum) => {
  let param = {
    provinceId: queryForm.provinceId,
    cityId: queryForm.cityId,
    estimatedGrade: queryForm.estimatedGrade,
    afDate: queryForm.afDate,
    state: queryForm.state,
    pageNum: pageNum,
    maxPageNum: store.state.maxPageNum,
  };
  axios
    .post("aqiFeedback/listAqiFeedbackPage", param)
    .then((response) => {
      pageResponseDto.value = response.data;
      console.log(pageResponseDto.value);
    })
    .catch((error) => {
      console.log(error);
    });
};

//初始化(查询省)
const listGridProvinceAll = () => {
  axios
    .get("gridProvince/listGridProvinceAll")
    .then((response) => {
      provinceArr.value = response.data;
      //默认按照第一个省查询市
      listGridCityByProvinceId(provinceArr.value[0].provinceId);
      provinceArr.value.unshift({
        provinceId: 0,
        provinceName: "-- 全部 --",
      });
    })
    .catch((error) => {
      console.log(error);
    });
};

// 初始化(查询市)
const listGridCityByProvinceId = (provinceId) => {
  axios
    .get("gridCity/listGridCityByProvinceId", {
      params: {
        provinceId: provinceId
      }
    })
    .then((response) => {
      cityArr.value = response.data;
      cityArr.value.unshift({
        cityId: 0,
        cityName: "-- 全部 --",
      });
    })
    .catch((error) => {
      console.log(error);
    });
};


//初始化(查询aqi)
const listAqiAll = () => {
  axios
    .get("aqi/listAqiAll")
    .then((response) => {
      // 取到真正的数组在 response.data.t
      aqiArr.value = response.data.t || [];
      // 头部添加“全部”选项
      aqiArr.value.unshift({
        aqiId: 0,
        chineseExplain: "-- 全部 --",
      });
    })
    .catch((error) => {
      console.log(error);
    });
};


const init = () => {
  //初始化1：查询省市
  listGridProvinceAll();
  //初始化2：查询aqi
  listAqiAll();
  //初始化3：查询反馈列表
  listAqiFeedbackPage(1);
};
init();

const clear = () => {
  queryForm.provinceId = 0;
  queryForm.cityId = 0;
  queryForm.estimatedGrade = 0;
  queryForm.afDate = '';
  queryForm.state = '0';
};

const query = () => {
  listAqiFeedbackPage(1);
};

const changeProvince = () => {
  listGridCityByProvinceId(queryForm.provinceId);
};

const detailsEvent = (afId)=>{
  router.push({path:'/index/feedbackInfo',query:{afId: afId}});
}

const assignEvent = (af)=>{
  router.push({path:'/index/assignFeedback',query:{afId: af.afId,provinceId:af.provinceId,cityId:af.cityId}});
}
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
}
</style>